<template>
  <div style="padding: 20px;">
    <el-input v-model="searchText" style="width: 640px;margin-left: 50%;transform: translate(-50%,0);" clearable placeholder="请输入查询条件,按Enter查询" @keyup.enter.native="selectInfoChange"></el-input>
    <el-table
      :data="listData"
      stripe
      style="width: 90%;margin-left: 5%;margin-top: 20px;text-align: center;">
      <el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="作业名称">
                <span>{{ props.row.script_name }}</span>
              </el-form-item>
              <el-form-item label="作业 ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="执行账户">
                <span>{{ props.row.release_user }}</span>
              </el-form-item>
              <el-form-item label="IP">
                <span>&emsp;&emsp;&emsp;{{ props.row.hosts }}</span>
              </el-form-item>
              <el-form-item label="脚本内容">
                <span>{{ props.row.script_content }}</span>
              </el-form-item>
              <el-form-item label="脚本参数">
                <span>{{ props.row.script_parms }}</span>
              </el-form-item>
              <el-form-item label="超时时间">
                <span>{{ props.row.timeout }}</span>
              </el-form-item>
              <el-form-item label="状态">
                <span v-if="props.row.is_final === 0" style="color: green;">&emsp;&emsp;Running</span>
                <span v-else style="color: red;">&emsp;&emsp;Stop</span>
              </el-form-item>
              <el-form-item label="创建时间">
                <span>{{ props.row.create_time }}</span>
              </el-form-item>
              <el-form-item label="操作者">
                <span>&emsp;{{ props.row.operator }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        header-align="center"
        label="作业 ID"
        prop="id">
      </el-table-column>
      <el-table-column
        header-align="center"
        label="作业名称"
        prop="script_name">
      </el-table-column>
      <el-table-column
        header-align="center"
        label="账户名称"
        prop="release_user">
      </el-table-column>
      <el-table-column
        header-align="center"
        label="ip"
        prop="hosts"
        width="130px">
      </el-table-column>
      <el-table-column
        header-align="center"
        label="操作者"
        prop="operator">
      </el-table-column>
      <el-table-column
        header-align="center"
        label="状态"
        prop="type">
        <template slot-scope="scope">
          <span v-if="scope.row.is_final === 0" style="color: green;">Running</span>
          <span v-else style="color: red;">Stop</span>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="queryDetail(scope.row.id)">查看执行结果
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChange"
      style="float:right;margin-top: 10px;margin-right: 5%;"
      layout="sizes,prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page.sync="currentPage">
    </el-pagination>
  </div>
</template>

<script>

import { TaskList } from '../../api/configure'

export default {
  name: 'task-run-detail',
  data() {
    return {
      searchText: '',
      listData: [],
      expands: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  watch: {
    currentPage: function(val) {
      this.currentPage = val
      TaskList({
        page: this.currentPage,
        length: this.pageSize
      }).then(res => {
        if (res.code === 200) {
          this.listData = res.data.table_data
          this.total = res.data.total
        }
      }).catch(err => {
        console.log(err)
        this.listData = null
        this.$notify({
          title: '失败',
          message: '获取失败',
          type: 'warning',
          duration: 2000
        })
      })
    }
  },
  created() {
    TaskList({
      page: this.currentPage,
      length: this.pageSize
    }).then(res => {
      if (res.code === 200) {
        this.listData = res.data.table_data
        this.total = res.data.total
      }
    }).catch(err => {
      console.log(err)
      this.listData = null
      this.$notify({
        title: '失败',
        message: '获取失败',
        type: 'warning',
        duration: 2000
      })
    })
  },
  methods: {
    queryDetail(id) {
      this.$router.push({ path: '/task/task-run', query: { id: id }})
    },
    sizeChange(val) {
      this.pageSize = val
      TaskList({
        page: this.currentPage,
        length: this.pageSize
      }).then(res => {
        if (res.code === 200) {
          this.listData = res.data.table_data
          this.total = res.data.total
        }
      }).catch(err => {
        console.log(err)
        this.listData = null
        this.$notify({
          title: '失败',
          message: '获取失败',
          type: 'warning',
          duration: 2000
        })
      })
    },
    selectInfoChange() {
      if (this.searchText !== '') {
        TaskList({
          page: this.currentPage,
          length: this.pageSize,
          select_info: this.searchText
        }).then(res => {
          if (res.code === 200) {
            this.listData = res.data.table_data
            this.total = res.data.total
          }
        }).catch(err => {
          console.log(err)
          this.listData = null
          this.$notify({
            title: '失败',
            message: '获取失败',
            type: 'warning',
            duration: 2000
          })
        })
      } else {
        TaskList({
          page: this.currentPage,
          length: this.pageSize
        }).then(res => {
          if (res.code === 200) {
            this.listData = res.data.table_data
            this.total = res.data.total
          }
        }).catch(err => {
          console.log(err)
          this.listData = null
          this.$notify({
            title: '失败',
            message: '获取失败',
            type: 'warning',
            duration: 2000
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.source {
  width: 1020px;
  border: 1px solid #DDDDDD;
  min-height: 80px;
  margin-left: 20px;
  margin-top: 20px;
  padding: 0 15px;
  .header {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    font-size: 13px;
    height: 54px;
    .title {
      line-height: 54px;
      font-size: 15px;
      font-weight: 700;
    }
  }
}
.demo-table-expand {
  font-size: 0;
  text-align: left;
  margin-left: 15%;
  .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}
</style>


